<template>
  <div class="pay">
    <dl v-for="(item, index) in list" :key="index">
      <dt>
        <img :src="item.img" alt="" />
      </dt>
      <dd>
        <h3>{{ item.areaname }}</h3>
        <p class="p1">{{ item.title }}</p>
        <p class="p2">{{ item.utime }}</p>
        <p class="p3">价格:{{ item.fangjia }}</p>
      </dd>
      <div>
        <p v-if="item.flag == true">订单已完成</p>
        <div v-else-if="item.flag == false && aa >= 0">
          <p>支付时间</p>
          <p>{{ paymenttime }}</p>
          <p @click="pay(index)">去支付 ></p>
        </div>
        <p v-else-if="aa <= 0">订单已过期</p>
      </div>
    </dl>
  </div>
</template>

<script>
import { pay } from "../../services/index";
export default {
  data() {
    return {
      list: [
        {
          flag: true,
          img:
            "https://images.sqfcw.com/attachment/information/20210616/aa1606569a0faaf04b13f2c8eb651b8b200f4923.jpeg",
          areaname: "苏宿园区",
          title: "(苏宿园区)万科未来之光3室2厅1卫145万102m²出售",
          utime: "2021-06-22 15:31",
          fangjia: "145",
        },
        {
          flag: false,
          img:
            "https://images.sqfcw.com/attachment/information/20210616/aa1606569a0faaf04b13f2c8eb651b8b200f4923.jpeg",
          areaname: "苏宿园区",
          title: "(苏宿园区)万科未来之光3室2厅1卫145万102m²出售",
          utime: "2021-06-22 15:31",
          fangjia: "145",
        },
        {
          flag: true,
          img:
            "https://images.sqfcw.com/attachment/information/20210616/aa1606569a0faaf04b13f2c8eb651b8b200f4923.jpeg",
          areaname: "苏宿园区",
          title: "(苏宿园区)万科未来之光3室2厅1卫145万102m²出售",
          utime: "2021-06-22 15:31",
          fangjia: "145",
        },
        {
          flag: true,
          img:
            "https://images.sqfcw.com/attachment/information/20210616/aa1606569a0faaf04b13f2c8eb651b8b200f4923.jpeg",
          areaname: "苏宿园区",
          title: "(苏宿园区)万科未来之光3室2厅1卫145万102m²出售",
          utime: "2021-06-22 15:31",
          fangjia: "145",
        },
      ],
      paymenttime: "",
      aa: 0,
    };
  },
  async onShow() {
    //支付倒计时
    let time = 1;
    await setInterval(() => {
      time = time - 1;
      let minute = parseInt(time / 60);
      let second = parseInt(time % 60);
      this.paymenttime = "还剩" + minute + "分" + second + "秒";
      this.aa = minute + second;
    }, 1000);
  },

  methods: {
    async pay(index) {
      //调用
      let result = await pay({ total_fee: 1 });
      //结构
      let { timeStamp, nonceStr, paySign } = result.data;
      wx.requestPayment({
        timeStamp,
        nonceStr,
        package: result.data.package,
        signType: "MD5",
        paySign,
        success: (res) => {
          if (res.errMsg == "requestPayment:ok") {
            this.list[index].flag = true;
            wx.showToast({
              title: "订单支付成功",
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pay {
  width: 100%;
  height: 100%;
  dl {
    width: 100%;
    height: 300rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #ddd;
    dt {
      width: 200rpx;
      height: 200rpx;
      border-radius: 10rpx 20rpx;
      img {
        width: 100%;
        height: 100%;
      border-radius: 10rpx 20rpx;

      }
    }
    dd {
        display: flex;
        flex-direction: column;
      width: 200rpx;
      height: 100%;
      line-height: 50rpx;
      h3 {
        font-weight: 900;
        margin-top: 20rpx;
      }
      p {
        font-size: 26rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        overflow: hidden;
      }
      .p3{
          color: red;
      }
    }
    div {
        width: 120rpx;
      p {
        font-size: 20rpx;
      }
    }
  }
}
</style>
